let mycookie = myGetCookie()
console.log(mycookie.login)

// 引入公共foot.html
$("#foot").load("./foot.html");


// 调用函数 动态渲染生成页面
setPage();

// 移入，显示退出登录的li
$('.layout-header-user').mouseenter(function () {
    $('.layout-header-user-logout').show()
})

// 移出，隐藏退出登录的li
$('.layout-header-user').mouseleave(function () {
    $('.layout-header-user-logout').hide()
})


// 点击关闭按钮，隐藏登陆提示信息
$('.close-tips').click(function () {
    $('.cart-login-tips').hide()
})

// 点击退出登录
$('.logout').click(function () {
    mySetCookie('login', '1', '/', '-1')
    // 
    window.localStorage.setItem('name', '')

    testLogin()
})

// 登录验证
testLogin()

function testLogin() {
    let mycookie = myGetCookie() //{login: '1'}
    console.log(mycookie)
    // console.log(mycookie.login)

    // 用户登录时
    if (mycookie.login !== undefined) {
        // / 获取当前登录用户的用户名
        let name = window.localStorage.getItem('name')

        if (name) { // 用户名不为空
            // 显示 当前登录用户的用户名
            $('.login-span').html(name)
        }

        // 当前已经有用户登录了，就不用再点击跳转登录页面了
        $('.login').attr('href', 'javascript:;')
        // 登录提示信息显示
        $('.cart-login-tips').hide()
        // 退出登录的ul显示
        $('.layout-member-downmenu').show()
        // 让小三角显示
        $('.layout-member-triangle').show()


    }
    // 用户没有登陆
    else {
        $('.login-span').html('登录')
        // 登录提示信息隐藏
        $('.cart-login-tips').show()
        // 把退出登录的ul隐藏了
        $('.layout-member-downmenu').hide()
        // 让小三角显示
        $('.layout-member-triangle').hide()
        // 隐藏
        $('.cart').hide()
        // 隐藏空购物车页面
        $('.cart-empty').hide()
    }

    // 终极隐藏
    // if($('.login-span').html()==='登录'){
    //     // 把退出登录的ul隐藏了
    //     $('.layout-member-downmenu').hide()
    // }
}


// 点击立即登录时候
$('.login').on('click', function () {
    // 没登录，跳转到登录页面时候
    if (myGetCookie().login === undefined) {
        // 记录从列表页跳到登录页
        window.localStorage.setItem('url', 'cart')
    }
})


// 点击编辑按钮，出现完成  事件委托
$('.cart').on('click', '.cart-col-ctrl', function () {
    // 切换，有就删除，没有就添加
    $('.cart-col-ctrl').toggleClass('show')

    // show，内容显示完成，否则内容显示编辑
    if ($('.cart-col-ctrl').hasClass('show')) {
        $('.cart-col-ctrl').text('完成')
        // 添加let-show
        $('.cart-product-remove').addClass('let-show')
    } else {
        $('.cart-col-ctrl').text('编辑')
        // 删除let-show
        $('.cart-product-remove').removeClass('let-show')
    }
})



// 事件委托 点击删除商品按钮，
$('.cart').on('click', '.let-show', function () {
    // 获取当前商品的id
    let cur_goods_id = $(this).attr('goods_id')

    let cart = localStorage.cart
    cart = JSON.parse(cart);
    console.log(cart)

    // 删除商品
    for (var i = 0; i < cart.length; i++) {
        if (cart[i].goods_id === cur_goods_id) {
            cart.splice(i, 1) // 删除
            break
        }
    }
    console.log(cart)
    localStorage.cart = JSON.stringify(cart)
    setPage()
})


// 点击全选按钮
// 事件委托 
$('.cart').on('click', '[name="all"]', function () {
    let cart = localStorage.cart
    cart = JSON.parse(cart);

    for (var i = 0; i < cart.length; i++) {
        cart[i].buy = $(this).prop('checked')
    }

    localStorage.cart = JSON.stringify(cart)
    setPage()
})



// 点击商品的选中按钮
// 事件委托 
$('.cart').on('click', '[name="other"]', function () {
    let cart = localStorage.cart
    cart = JSON.parse(cart);
    let cur_goods_id = $(this).attr('goods_id')
    for (var i = 0; i < cart.length; i++) {
        if(cart[i].goods_id === cur_goods_id){
            cart[i].buy = $(this).prop('checked')
        }
    }

    localStorage.cart = JSON.stringify(cart)
    setPage()
})




// 动态生成的页面，使用事件委托做，
// 商品减一按钮
$('.cart').on('click', '[name="-"]', function () {
    // 获取当前商品的id
    let cur_goods_id = $(this).attr('goods_id')

    let cart = localStorage.cart
    cart = JSON.parse(cart);
    console.log(cart)

    cart.forEach(function (item) {
        if (item.goods_id === cur_goods_id) {
            item.num--
        }
    })

    localStorage.cart = JSON.stringify(cart)
    setPage()
})


// 商品加一按钮
$('.cart').on('click', '[name="+"]', function () {
    let cur_goods_id = $(this).attr('goods_id')

    let cart = localStorage.cart
    cart = JSON.parse(cart);
    console.log(cart)
    cart.forEach(function (item, index) {
        if (item.goods_id === cur_goods_id) {
            item.num++
        }
    })

    localStorage.cart = JSON.stringify(cart)
    setPage()
})


// 定义函数动态生成页面
function setPage() {
    let cart = localStorage.cart
    // console.log(cart)


    // 定义变量存储 购买商品的种类 数量 价格
    // let type = 0;
    // let num = 0;
    let money = 0;


    // 空购物车
    if (cart === undefined) {
        $('.cart').hide()
        $('.cart-empty').show()
    }
    // 购物车有商品
    else {
        // cart 存储的 json字符串 转化为 对应的数据结构 数组中存储对象
        cart = JSON.parse(cart);


        // 购物车被清空
        if (cart.length === 0) {
            $('.cart').hide()
            $('.cart-empty').show()
        }
        // 购物车有数据
        else {
            // 定义变量 存储 全选input标签的选中效果
            let bool = true;

            // 1, 生成 li标签之前的内容
            let str = `
                <div class="mzcontainer">
                    <table class="cart-header">
                        <tr>
                        <td class="cart-col-select">
                            <!-- 全选 -->
                            <div class="cart-select-all">
                                <input type="checkbox" class="mz-checkbox-all" name="all"></input>
                                <span>全选</span>
                            </div>
                        </td>
                        <td class="cart-col-price">单价（元）</td>
                        <td class="cart-col-number">数量</td>
                        <td class="cart-col-total">小计（元）</td>
                        <td class="cart-col-ctrl">编辑</td>
                        </tr>
                    </table>
                    <ul class="cart-merchant-list">
            `;

            // 2, 根据 localStorage 中 cart 存储的数据 动态渲染生成li标签
            cart.forEach(function (item, key) {

                // 如果有其他input标签 选中属性 结果是 false
                if (item.buy === false) {
                    // 全选input标签 选中属性 也是赋值false
                    bool = false;
                } else {
                    // 选中状态 计算 购买 商品种类 数量 价格
                    // type++;
                    // num += item.num;
                    
                    // 只要有一个商品被选中，直接计算这个商品的钱数 加在总价钱里面
                    money += item.num * Number(item.goods_price);
                }


                str += `
                    <li>
                        <table class="cart-merchant-body">
                            <tr class="cart-product">
                                <td class="cart-col-select">
                                    <div class="cart-select">
                                        <input type="checkbox" name="other" class="mz-checkbox" goods_id="${item.goods_id}"  ${ item.buy ? 'checked' : '' }>
                                        <a href="#" class="cart-product-link">
                                            <img src="${item.goods_small_logo}" alt="">
                                        </a>
                                        <a href="" class="cart-product-info">
                                            <p class="cart-product-item-name">${item.cat_id}</p>
                                            <p class="cart-product-desc">${item.goods_name}</p>
                                        </a>
                                    </div>
                                </td>
                                <td class="cart-col-price">
                                    <span class="cart-product-price">￥${item.goods_price}</span>
                                </td>
                                <td class="cart-col-number">
                                    <button name="-" goods_id="${item.goods_id}" type="button" ${ item.num === 1 ? 'disabled' : ''}  class="btn btn-default">-</button>
                                    <button type="button" class="price-btn btn btn-default" disabled>${item.num}</button>
                                    <button name="+" goods_id="${item.goods_id}" type="button" ${ item.num === Number(item.goods_number) ? 'disabled' : '' }  class="btn btn-default">+</button>
                                </td>
                                <td class="cart-col-total">
                                    <span class="cart-total-product-price">￥${item.num*item.goods_price}</span>
                                </td>
                                <td class="cart-col-ctrl-remove">
                                    <div class="cart-product-remove" goods_id="${item.goods_id}"></div>
                                </td>
                            </tr>
                        </table>
                    </li>
                `;

            })
            // 3, 生成 li标签之后的内容
            str += `
                </ul>
                </div>
                <div class="cart-footer">
                    <div class="mzcontainer">
                        <div class="cart-footer-right">
                        <span class="totalPrice">￥${money}</span>
                        <a href="#" class="cartSubmit">去结算</a>
                        </div>
                    </div>
                </div>
            `;
            // 4, 生成的字符串写入标签
            $('.cart').html(str);

            // 5, 设定 全选input标签的属性值
            $('[name="all"]').prop('checked', bool);


        }
    }
}